<template>
  <div class="app-container">
    <el-col :span="24" :xs="24">
      <el-form :model="selectAuthor" :inline="true">
        <el-form-item label="作者名">
          <el-input v-model="selectAuthor.authorName" style="width: 240px;" placeholder="请输入作者名称"></el-input>
        </el-form-item>
        <el-form-item label="作者朝代">
          <el-select v-model="selectAuthor.authorDynasty" placeholder="请选择">
              <el-option
                v-for="item in dict.type.author_dynasty"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:dict:add']"
            >新增</el-button>
            </el-col>
        </el-row>
      </el-form>
      <!--table表格-->
      <el-table
          :data="AllAuthor"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="作者名"
            width="120"
            prop="authorName"
            >
          </el-table-column>
          <el-table-column
            prop="authorDynasty"
            label="朝代"
            width="120">
            <template slot-scope="scope">
              {{detectioncd(scope.row.authorDynasty)}}
            </template>
          </el-table-column>
          <el-table-column
          align="center"
          :show-overflow-tooltip='true'
            prop="authorIntroduction"
            label="简介"
            width="1000"
            >
          </el-table-column>
          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="clickUpdate(scope.row)" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" @click="removeAuthor(scope.row.authorId)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="selectAuthor.pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </el-col>
    <!--dialog-->
    <el-dialog
      @close=diaAllClose()
      :title="diaStatus"
      :visible.sync="dialogVisible"
      width="60%"
      >
      <div>
        <el-form :model="nowAuthor" ref="ruleFrom" :rules="rules">
          <el-form-item label="作者名" prop="authorName">
            <el-input style="width: 200px;" v-model="nowAuthor.authorName"></el-input>
          </el-form-item>
          <el-form-item label="作者朝代" prop="authorDynasty">
            <el-select v-model="nowAuthor.authorDynasty" placeholder="请选择">
                <el-option
                  v-for="item in dict.type.author_dynasty"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="作者简介" prop="authorIntroduction">
            <el-input type="textarea" style="width: 600px;" v-model="nowAuthor.authorIntroduction"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation()">取 消</el-button>
        <el-button v-if="nowAuthor.authorId!=null" type="primary" @click="updateAuthor('ruleFrom')">修改</el-button>
        <el-button v-else type="primary" @click="insertAuthor('ruleFrom')">添加</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { getAllAuthor, deleteAuthor, UpdateAuthor, InsertAuthor } from "@/api/poetryLibrary/author";
  export default{
    name: 'author',
    dicts: ['author_dynasty'],

    data(){
      return{
        //验证规则
        rules:{
          authorName:[{ required: true, message: '作者名不能为空', trigger: 'blur' }],
          authorDynasty:[{ required: true, message: '作者朝代不能为空', trigger: 'blur' }],
          authorIntroduction:[{ required: true, message: '作者简介不能为空', trigger: 'blur' }],
        },

        /*
        总页数
        */
        total:undefined,
        //搜索实体类
        selectAuthor:{
          //作者名
          authorName:null,
          //朝代
          authorDynasty:null,
          /*当前页*/
          pageNum:1,
          /*一页的数量*/
          pageSize:10,
        },
        //所有朝代
        AllChaoDai:[],
        //所有作者
        AllAuthor:[],
        //dialog 弹框
        dialogVisible:false,
        //弹框的状态
        diaStatus:'',
        //当前的对象
        nowAuthor:{},
      }
    },
    methods:{
      //搜索事件
      getAuthor(){
        getAllAuthor(this.selectAuthor).then(resp=>{
          this.AllAuthor=resp.data.content
          this.total=resp.data.totalSize
        })
      },
      /*点击搜索按钮时*/
      handleQuery(){
        this.selectAuthor.pageNum=1
        this.getAuthor()
      },
      //重置事件
      resetQuery(){
        this.selectAuthor={};
        this.resetForm("selectAuthor");
      },
      /*朝代判断*/
      detectioncd(cd){
        var newCd="数据未定义";
        this.AllChaoDai.forEach(function(item,index){
          if(item.value==cd){
            newCd=item.label
          }
        })
        return newCd
      },
      /*点击页面时*/
      handleCurrentChange(currentPage){
        this.selectAuthor.pageNum=currentPage;
        this.getAuthor()
      },
      //删除作者
      removeAuthor(id){
        deleteAuthor({id:id}).then(resp=>{
          console.log(resp)
          if(resp.data=="DELETE_OK"){
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getAuthor()
          }else{
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
            this.getAuthor()
          }
        }).catch(meaggse=>{
          this.$message({
            message: meaggse,
            type: 'warning',
          })
          this.getAuthor()
        })
      },
      //点击添加按钮
      handleAdd(){
        this.nowAuthor={}
        this.dialogVisible=true
      },
      //点击修改按钮
      clickUpdate(row){
        this.dialogVisible=true
        this.nowAuthor=row
        this.diaStatus="修改作者"
      },
      //cancellation 取消按钮点击
      cancellation(){
        this.nowAuthor={},
        this.dialogVisible=false
      },
      //修改操作
      updateAuthor(formName){
       this.$refs[formName].validate((valid)=>{
         if(valid){
           UpdateAuthor(this.nowAuthor).then(resp=>{
             console.log(resp)
             if(resp.data=="UPDATE_OK"){
               this.$message({
                 message:"修改成功",
                 type:'success'
               })
               this.dialogVisible=false
               this.getAuthor()
             }
           })
         }else{
           return false
         }
       })
      },
      //diaClose关闭时操作
      diaAllClose(){
        this.nowAuthor={}
        this.$refs['ruleFrom'].clearValidate()//移除校验结果并重置字段值
        this.getAuthor()
      },
      //添加
      insertAuthor(formName){
        this.$refs[formName].validate((valid)=>{
          if(valid){
            InsertAuthor(this.nowAuthor).then(resp=>{
              if(resp.data=="SAVE_OK"){
                this.$message({
                  message:'添加成功',
                  type:'success'
                })
                this.getAuthor()
                this.dialogVisible=false
                this.nowAuthor={}
              }
            }).catch(message=>{
              this.$message({
                message:message,
                type:'warning'
              })
              this.getAuthor()
            })
          }else{
            return false
          }
        })
      }
    },
    created(){
      this.AllChaoDai=this.dict.type.author_dynasty
      this.getAuthor()
    }
  }
</script>

<style>
</style>
